<template>
  <div class="app-container">
    <div class="panel">
      <el-form :model="formInline" label-width="20%" class="search-form">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="关键字" size="small">
              <el-input
                v-model="formInline.keyword"
                clearable
                placeholder="搜索关键字"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="搜索方式" size="small">
              <el-select v-model="formInline.value" placeholder="请选择">
                <el-option
                  v-for="item in formInline.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" align="right">
            <el-form-item size="small">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="search"
                @click.native="search"
                >查询</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="search"
                @click="openAddDialog"
                >新增</el-button
              >
              <div class="marginLeft10">
                <el-popconfirm
                  title="确定删除这些数据吗？"
                  @onConfirm="getRemoveEvent"
                >
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    slot="reference"
                    class="search"
                    >删除</el-button
                  >
                </el-popconfirm>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" align="right">
            <el-button
              icon="el-icon-upload2"
              type="primary"
              size="small"
              @click.native="exportDataEvent"
              class="search"
              >导出</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-tickets"
              @click="navMaterial"
              class="search"
              >物料对照表</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="source" v-loading="listLoading">
      <vxe-grid
        :data="list"
        border
        resizable
        :export-config="{
          types: ['csv', 'xml', 'txt']
        }"
        highlight-hover-row
        show-overflow
        ref="xGrid"
        style="width: 100%"
        size="mini"
        :columns="columns"
        max-height="400"
        :seq-config="{
          startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
        }"
        :pager-config="tablePage"
        @page-change="handlePageChange"
        :edit-config="{
          trigger: 'dblclick',
          mode: 'cell'
        }"
        @edit-closed="closeRowMethod"
        :checkbox-config="{
          highlight: true
        }"
      ></vxe-grid>
    </div>
    <addSupplies :addDialog.sync="addDialog" :units="units"></addSupplies>
  </div>
</template>

<script>
import { getList, getUnits, deleteMaterial, edit } from '@/api/supplies'
import { parseTime } from '@/utils/index'
import addSupplies from '@/views/supplies/add.vue'
export default {
  data() {
    return {
      list: [],
      listLoading: true,
      addDialog: false, // 新增
      formInline: {
        keyword: '',
        options: [
          {
            value: 'name',
            label: '物料名称'
          },
          {
            value: 'code',
            label: '物料编码'
          }
        ],
        value: 'name'
      },
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { field: 'id', title: 'ID', width: 80, fixed: 'left' },
        {
          field: 'name',
          title: '物料名称',
          width: 350,
          editRender: { name: 'input' }
        },
        {
          field: 'code',
          title: '物料编码',
          width: 280,
          editRender: { name: 'input' }
        },
        {
          field: 'spec',
          title: '规格',
          width: 280,
          editRender: { name: 'input' }
        },
        {
          field: 'basic_measure_unit',
          title: '基本计量单位',
          width: 280,
          editRender: { name: '$select', options: [] }
        },
        {
          field: 'basic_measure_unit_code',
          title: '计量单位代码',
          width: 180
        },
        {
          field: 'alias',
          title: '别名',
          width: 180,
          editRender: { name: 'input' }
        }
      ],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 1000,
        align: 'right',
        pageSizes: [100, 200, 500, 1000, 5000],
        layouts: [
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ],
        perfect: true
      },
      units: []
    }
  },
  components: {
    addSupplies
  },
  created() {
    this.fetchData()
    getUnits()
      .then((res) => {
        this.units = res.data
        const column1 = this.$refs.xGrid.getColumnByField('basic_measure_unit')
        const basic_measure_unit = []
        for (const i in res.data) {
          basic_measure_unit.push({
            value: res.data[i].name,
            label: res.data[i].name
          })
        }
        column1.editRender.options = basic_measure_unit
      })
      .catch(() => {})
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(
        this.tablePage.pageSize,
        this.tablePage.currentPage,
        this.formInline.keyword,
        this.formInline.value
      )
        .then((res) => {
          this.tablePage.total = res.data.total
          this.list = res.data.data
          this.pageForm.total = res.data.length
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    search() {
      this.tablePage.currentPage = 1
      this.fetchData()
    },
    parseTime({ cellValue }) {
      if (cellValue) {
        return parseTime(cellValue)
      } else {
        return '空'
      }
    },
    getRemoveEvent() {
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      if (list.length > 0) {
        let ids = ''
        for (const item of list) {
          ids = item.id + ',' + ids
        }
        deleteMaterial(ids)
          .then((res) => {
            this.loading = false
            this.$message({
              message: res.msg,
              type: 'success'
            })
            grid.removeCheckboxRow()
          })
          .catch((res) => {
            this.loading = false
          })
      } else {
        this.$message({
          message: '未选择任何数据',
          type: 'warning'
        })
      }

      //   const removeRecords = grid.getRemoveRecords()
      //   this.$XModal.alert(removeRecords.length)
    },
    printEvent() {
      this.$refs.xGrid.print()
    },
    printSelectEvent() {
      this.$refs.xGrid.print({
        data: this.$refs.xGrid.getCheckboxRecords()
      })
    },
    exportDataEvent() {
      this.$refs.xGrid.openExport({
        isPrint: false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    openAddDialog() {
      this.addDialog = true
    },
    navMaterial() {
      this.$router.replace('/supplies/material')
    },
    closeRowMethod({ row }) {
      const obj = this.units.filter(
        (item) => item.name === row.basic_measure_unit
      )
      this.listLoading = true
      if (obj.length > 0) {
        row.value2 = obj[0].code
        edit(row)
          .then((res) => {
            this.listLoading = false
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
          .catch((res) => {
            this.listLoading = false
          })
      } else {
        this.$message.error('基本计量单位获取失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  background-color: #f9fafc;
}
.source {
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
  .money {
    font-weight: bold;
  }
  .tips {
    padding: 0 0 15px;
    font-size: 12px;
    color: rgba($color: #000000, $alpha: 0.5);
    .tips-item {
      padding-right: 20px;
      padding-left: 20px;
      border-right: 1px solid #dcdfe6;
      .numbs {
        font-weight: 600;
        color: #f56c6c;
        font-size: 14px;
        padding: 0 5px 0 3px;
      }
    }
    .no-border {
      border: 0 !important;
    }
  }
  .margin20 {
    margin-top: 10px;
  }
}
.el-form-item {
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
}
.marginLeft10 {
  margin-left: 10px;
  display: inline;
  text-align: right;
}
</style>
